<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <meta charset="utf-8">
  <title>ZPPChat | History</title>
  
  <!-- JQuery -->
  <script                src="/js/jquery-1.8.2.js"></script>
  
  <!-- JQuery UI Tabs -->
  <script                src="/js/jquery.ui.1.9.2.core.js"></script>
  <script                src="/js/jquery.ui.1.9.2.widget.js"></script>
  <script                src="/js/jquery.ui.1.9.2.tabs.js"></script>
  
  <!-- Scroller -->
  <link rel="stylesheet" href="/css/scroller.css">
  <script                src="/js/scroller.js"></script>
  
  <!-- User defined scripts and stylesheets. -->
  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="/css/history.css">
  <script                src="/js/history.js"></script>
</head>

<body>
  <div id="history" class="box inside-bordered top-box centered">
    <h1>History</h1>
    
    <div id="content">
      <div id="rooms" class="scrollable">
      <!-- Headers - room names of every conversation. -->
      <ul class="scrollable-content">
      {% for room, _ in history %}
        <li>
          <a href="#tabs-{{ room.key }}" class="button room-button left">{{ room.name }}</a>
        </li>
      {% endfor %}
      </ul>
      </div>

      <!-- Actual messages. -->
      <div id="messages" class="scrollable">
        <div class="scrollable-content">
        {% for room, messages in history %}
          <!-- Messages for one room. -->
          <ul id="tabs-{{ room.key }}">
          {% for m in messages %}
            <li>
              <span class="message-username">{{ m.sender.username }}</span>: <span class="message-content">{{ m.content|safe }}</span>
            </li>
          {% endfor %}
          </ul>
        {% endfor %}
        </div>
      </div>
    </div>
  </div>
</body>

</html>